<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../easyui-config.js"></script>
</head>
<body>

    <input id="ct1" class="easyui-combotree" />
    <script>
        var data = [{
            "id": 1,
            "text": "My Documents",
            "children": [{
                "id": 11,
                "text": "Photos",
                "state": "closed",
                "children": [{
                    "id": 111,
                    "text": "Friend"
                }, {
                    "id": 112,
                    "text": "Wife"
                }, {
                    "id": 113,
                    "text": "Company"
                }]
            }, {
                "id": 12,
                "text": "Program Files",
                "children": [{
                    "id": 121,
                    "text": "Intel"
                }, {
                    "id": 122,
                    "text": "Java",
                    "attributes": {
                        "p1": "Custom Attribute1",
                        "p2": "Custom Attribute2"
                    }
                }, {
                    "id": 123,
                    "text": "Microsoft Office"
                }, {
                    "id": 124,
                    "text": "Games",
                    "checked": true
                }]
            }, {
                "id": 13,
                "text": "index.html"
            }, {
                "id": 14,
                "text": "about.html"
            }, {
                "id": 15,
                "text": "welcome.html"
            }]
        }];
        $("#ct1").combotree({
            data: data
            , textField: null
            , required: true/* 是否必填 */
            , multiple: true /* 支持多选 */
            , multivalue: true /* 是否提交多个值 */
            , separator: '|' /* 多选文本时分隔符 */
            , width: 200 /* 组合框宽 */
            , height: 50 /* 组合框高 */
            , panelWidth: 300 /* 下拉框宽 */
            , panelHeight: 300 /* 下拉框高 */
            , panelMinWidth: 100
            , panelMaxWidth: 600
            , panelMinHeight: 100
            , panelMaxHeight: 500
            , panelAlign: 'right' /* 下拉框对齐方式 'left', 'right'*/
            , reversed: true /* 文本框失去焦点后是否恢复原值 */
            , selectOnNavigation: true /* 使用键盘导航项目时是否选择项目 */
            , editable: true /* 文本框是否可输入 */
            , disabled: false /* 禁用文本框 */
            , readonly: false /* 只读 */
            , hasDownArrow: true /* 显示下拉框右侧下拉箭头 */
            , value: '下拉框默认值' /* 下拉框默认值*/
            , delay: 500 /* 输入最后一个字符后,延时多久展开下拉框 */
            , keyHandler: {
                up: function (e) { showTip("up"); },
                down: function (e) { showTip("down"); },
                left: function (e) { showTip("left"); },
                right: function (e) { showTip("right"); },
                enter: function (e) { showTip("enter"); },
                query: function (q, e) { showTip("query"); }
            }
            , onShowPanel: function () {
                showTip('展开下拉框');
            }
            , onHidePanel: function () {
                showTip('收起下拉框');
            }
            , onChange: function (newValue, oldValue) {
                showTip('新值:' + newValue + ' 旧值:' + oldValue);
            }
        });
    </script>

    <div>
        <div class="easyui-linkbutton" onclick="$('#ct2').combotree({ multiple:true }).combotree('loadData', data)">加载数据</div>

        <div class="easyui-linkbutton" onclick="let options = $('#ct2').combotree('options'); showTip(JSON.stringify(options));">options</div>
        <div class="easyui-linkbutton" onclick="$('#ct2').combotree('reload','http://www.xxx.xxx')">重新加载数据</div>
        <div class="easyui-linkbutton" onclick="$('#ct2').combotree('clear')">清空数据</div>
        <div class="easyui-linkbutton" onclick="$('#ct2').combotree('setValue',{ id: 9999, text: '新填加的数据' })">设置单个值</div>
        <div class="easyui-linkbutton" onclick="$('#ct2').combotree('setValues', [3,21])">设置多个值</div>
        <div class="easyui-linkbutton" onclick="$('#ct2').combotree('setValues', [21, {id:73,text:'text73'}])">设置多个值</div>

    </div>

    <select id="ct2" class="easyui-combotree" data-options="url:null,width:240"></select>
    <script>
    </script>

</body>
</html>